﻿
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>Sortables demo - Interface plugin for jQuery </title>
			<style type="text/css" media="all">
			
			body {
				background: #fff;
				height: 100%;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			.groupWrapper {
				width: 32%;
				float: left;
				margin-right: 1%;
				min-height: 400px;
			}
			.groupItem {
				margin-bottom: 20px;
			}
			.groupItem .itemHeader {
				line-height: 28px;
				background-color: #E0EFFE;
				border-top: 2px solid #83BFFA;
				color: #000;
				padding: 0 10px;
				cursor: move;
				font-weight: bold;
				font-size: 16px;
				height: 28px;
				position: relative;
			}
			.groupItem .itemHeader a {
				position: absolute;
				right: 10px;
				top: 0px;
				font-weight: normal;
				font-size: 11px;
				text-decoration: none;
			}
			.sortHelper {
				border: 3px dashed #666;
				width: auto !important;
			}
			.groupWrapper p {
				height: 1px;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}
			</style>
		</head>
		<body>
			<div id="sort1" class="groupWrapper">
				<div id="newsFeeder" class="groupItem">
					<div style="-moz-user-select: none;" class="itemHeader">Feeds
						<a href="#" class="closeEl">[-] </a>
					</div>
					<div class="itemContent">
						<ul>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
						</ul>
					</div>
				</div>
				<div id="news" class="groupItem">
					<div style="-moz-user-select: none;" class="itemHeader">News
						<a href="#" class="closeEl">[-] </a>
					</div>
					<div class="itemContent">
						<ul>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
						</ul>
					</div>
				</div>
				<p>&nbsp; </p>
			</div>
			<div id="sort2" class="groupWrapper">
				<div style="position: static; display: block; left: -334px; top: 426px;" id="links" class="groupItem">
					<div style="-moz-user-select: none;" class="itemHeader">Links
						<a href="#" class="closeEl">[-] </a>
					</div>
					<div class="itemContent">
						<ul>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
						</ul>
					</div>
				</div>
				<div id="shop" class="groupItem">
					<div style="-moz-user-select: none;" class="itemHeader">Shopping
						<a href="#" class="closeEl">[-] </a>
					</div>
					<div class="itemContent">
						<ul>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
						</ul>
					</div>
				</div>
				<p>&nbsp; </p>
			</div>
			<div id="sort3" class="groupWrapper">
				<p>&nbsp; </p>
				<div style="position: static; display: block; left: 43px; top: -39px;" id="images" class="groupItem">
					<div style="-moz-user-select: none;" class="itemHeader">Images
						<a href="#" class="closeEl">[-] </a>
					</div>
					<div class="itemContent">
						<ul>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
							<li>orem ipsum dolor sit amet, consectetuer adipiscing elit </li>
						</ul>
					</div>
				</div>
			</div>
			<script type="text/javascript">
			$(document).ready(function() {
				$('a.closeEl').bind('click', toggleContent);
				$('div.groupWrapper').Sortable({
					accept: 'groupItem',
					helperclass: 'sortHelper',
					activeclass: 'sortableactive',
					hoverclass: 'sortablehover',
					handle: 'div.itemHeader',
					tolerance: 'pointer',
					onChange: function(ser) {},
					onStart: function() {
						$.iAutoscroller.start(this, document.getElementsByTagName('body'));
					},
					onStop: function() {
						$.iAutoscroller.stop();
					}
				});
			});
			var toggleContent = function(e) {
				var targetContent = $('div.itemContent', this.parentNode.parentNode);
				if (targetContent.css('display') == 'none') {
					targetContent.slideDown(300);
					$(this).html('[-]');
				} else {
					targetContent.slideUp(300);
					$(this).html('[+]');
				}
				return false;
			};
			function serialize(s) {
				serial = $.SortSerialize(s);
				alert(serial.hash);
			};
			</script>
			
			<script type="text/javascript">
				var client_id = 1;
			</script>
		
			<div style="position: absolute; display: none; cursor: move; list-style: none outside none; overflow: hidden; height: 97px; width: 358px; margin: 0px; left: 745px; top: 71px; opacity: 0.9999;" id="dragHelper"></div>
			<div class="" style="display: none; width: 358px; height: 97px; margin: 0px 0px 20px;" id="sortHelper">&nbsp; </div>
		</body>
	</html>